<!DOCTYPE html>
<html>
    <head>
        <title>属性选择器</title>
        <script src="./js/jquery-3.6.0.min.js" type="text/javascript"></script>
    </head>
    <body>
        <div id="topdiv" title="top" desc="页面边距">页面顶部</div>
        <div id="menudiv" title="menu">菜单栏</div>
        <div id="maindiv">主题区</div>
        <div id="leftdiv" title="mainleft">左侧栏</div>
        <div id="rightdiv" title="mainright">右侧栏</div>
        <div id="bottomdiv" title="bottom" desc="页面底部">底部栏</div>
        <div id="advdiv" title="advbottom">广告栏</div>
    <script type="text/javascript">
        $(function(e){
            $("div[title]").css({width:"300px",height:"30px",margin:"3px"});
            $("div[title=menu]").css("border","2px solid #AAA");
            $("div[title!=menu]").css({bakgroundColor:"#DDD"});
            $("div[title^=main]").css("margin-left","20px");
            $("div[title$=bottom]").css("padding-left","15px");
            $("div[title*=o]").css("font-style","italic");
            $("div[title*=o][desc]").css("font-weight","bold");
        });
    </script>
    </body>
</html>